import { lazy, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Avatar, Button, Badge, Modal } from "antd";
import { ContactsOutlined, MenuOutlined, MessageOutlined } from "@ant-design/icons";
import "./index.scss";
import UserInfo from "@renderer/components/UserInfo";
import { setMenuId } from "@renderer/store/action/menu";
import { setFrendId } from "@renderer/store/action/frend";

const Chat = lazy(() => import("./chat"));
const Contacts = lazy(() => import("./contacts"));
const Setting = lazy(() => import("./setting"));

const Home = (): JSX.Element => {
  const dispatch = useDispatch();
  const { activeMenuId } = useSelector((state: any) => state.menu);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isUserInfo, setIsUserInfo] = useState(false);
  let userInfo: any = [];
  useEffect(() => {
    const obj = localStorage.getItem("userInfo");
    if (obj) {
      const info = JSON.parse(obj);
      userInfo = info;
    }
  }, []);

  const menuList = [
    {
      menuId: "chat",
      menuName: "聊天",
      count: 5,
      icon: (
        <Button
          type="text"
          icon={
            <MessageOutlined
              style={{ fontSize: "22px", color: activeMenuId === "chat" ? "#0099FF" : "" }}
            />
          }
          className="btn"
        />
      ),
      component: Chat
    },
    {
      menuId: "contacts",
      menuName: "通讯录",
      count: 0,
      icon: (
        <Button
          type="text"
          icon={
            <ContactsOutlined
              style={{ fontSize: "22px", color: activeMenuId === "contacts" ? "#0099FF" : "" }}
            />
          }
          className="btn"
        />
      ),
      component: Contacts
    }
  ];

  const onDoubleSelect = (frendId) => {
    dispatch(setMenuId("chat"));
    dispatch(setFrendId(frendId));
  };
  // const onSelect = (frendId) => {
  //   dispatch(setFrendId(frendId));
  // };
  const DisplayComponent = () => {
    if (activeMenuId === "contacts") {
      return <Contacts onDoubleSelect={onDoubleSelect}></Contacts>;
    } else {
      return <Chat></Chat>;
    }
  };
  const handleMenuClick = (menuId) => {
    dispatch(setMenuId(menuId));
  };
  const handleSettingClick = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const handleView = () => {
    setIsUserInfo(!isUserInfo);
  };
  return (
    <div className="home">
      <div key={"menu"} className="menu">
        <div className="avatar">
          <Avatar size={32} onClick={() => handleView()}>
            {userInfo && userInfo.userName && userInfo.userName.charAt(0)}
          </Avatar>
          {/* <Avatar size={32} icon={<UserOutlined />} onClick={() => handleView()} /> */}
          {isUserInfo && (
            <UserInfo
              frendId={userInfo.userId}
              onSend={(id) => {
                onDoubleSelect(id);
                setIsUserInfo(false);
              }}
              onclose={() => setIsUserInfo(false)}
            ></UserInfo>
          )}
        </div>
        {menuList.map(({ menuId, icon, count }) => {
          return (
            <div key={menuId} className="menu-item" onClick={() => handleMenuClick(menuId)}>
              <Badge size="small" count={count}>
                {icon}
              </Badge>
            </div>
          );
        })}
        <div className="menu-item setting" onClick={() => handleSettingClick()}>
          <Button
            type="text"
            icon={
              <MenuOutlined
                style={{ fontSize: "22px", color: activeMenuId === "setting" ? "#0099FF" : "" }}
              />
            }
            className="btn"
          />
        </div>
      </div>
      <div className="content">
        <DisplayComponent></DisplayComponent>
      </div>
      <Modal title="设置" width="50%" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Setting></Setting>
      </Modal>
    </div>
  );
};

export default Home;
